<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>云收藏</title>
<!--	<base target="_blank">-->
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="login/js/login.js"></script>
</head>
<body>
<div id="app">
	<el-container>
		<el-header class="title">
			<div class="c900 flex">
				<el-link :underline="false" href="index.html">
					<h1>云收藏</h1>
				</el-link>
				<el-input style="width: auto" placeholder="请输入搜索关键字" v-model="name">
					<el-button slot="append" icon="el-icon-search" @click.prevent="toFind"></el-button>
				</el-input>
				<div class="flex">
					<el-popover
							placement="bottom"
							title="扫码登录"
							width="200"
							trigger="click">
						<fieldset>
							<legend>手机界面</legend>
							<img src="/createMobileHtml" style="height: 100px; width: 100px">
						</fieldset>
						<fieldset>
							<legend>扫码登录</legend>
							<img :src="'/createLoginQrcode?'+new Date().getTime()" style="height: 100px; width: 100px"
								onclick="this.src = '/createLoginQrcode?'+new Date().getTime()"
								@load="getToken">
						</fieldset>
						<el-button slot="reference">扫码登录</el-button>
					</el-popover>
<!--					<el-link>注册</el-link>-->
<!--					<el-link>登录</el-link>-->
					<login class="flex" ref="lg" @logined="queryTag">
<!--						<template #nologin>-->
<!--							<el-link @click.prevent="$refs.lg.showLogin=true">登录</el-link>-->
<!--							<el-link>注册</el-link>-->
<!--						</template>-->
						<template #logined="a">
							<el-avatar :src="a.user.head"></el-avatar>
							<el-link @click.prevent="$refs.lg.showUpdatePwd=true">修改密码</el-link>
							<el-link href="/login/logout">退出</el-link>
						</template>
					</login>
				</div>
			</div>
		</el-header>
		<el-main>
			<div class="c900 h100">
				<el-container class="h100">
					<el-aside class="h100">
						<el-menu class="h100" default-active="b" @select="selectTag">
							<el-menu-item index="a">
								<el-button type="primary" @click="showEdit=true">新增</el-button>
							</el-menu-item>
							<el-menu-item index="b">
								<span>全部 ({{allFavs}})</span>
							</el-menu-item>
							<el-menu-item v-if="activefindkey" index="d" >
								<span>查询结果 ({{selectedTag.favs.length}})</span>
							</el-menu-item>
							<el-menu-item v-for="t in tags" :index="t.id">
								<div class="flex">
									<span>{{t.name}} ({{t.favs.length}})</span>
									<el-button v-if="t.id" type="text" @click="openMergeDialog(t.id)">合并至</el-button>
								</div>
							</el-menu-item>
							<el-menu-item index="c">
								<span>云图</span>
							</el-menu-item>
						</el-menu>
					</el-aside>
					<el-main>
						<el-card v-if="selectedTag" v-for="f in (selectedTag||{}).favs">
							<div slot="header" class="flex">
								<div class="flex">
									<el-link :href="f.addr" :underline="false" target="_blank">
										<div class="flex" @click="openLink(f)">
											<img :src="f.image||'https://img0.baidu.com/it/u=447433031,4160304780&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=300'">
											<h3>{{f.name}}</h3>
											{{f.addr}}
										</div>
									</el-link>
									<small>访问量:{{f.opens}}</small>
								</div>
								<div>
									<el-button type="text" @click="toTop(f)">置顶</el-button>
									<el-button type="text">修改</el-button>
									<el-button type="text" @click="del(f)">删除</el-button>
								</div>
							</div>
							<div>
								<el-tag size='mini'>门户</el-tag>
								<el-tag size='mini'>娱乐</el-tag>
							</div>
							<p>{{f.intro}}</p>
						</el-card>
					</el-main>
				</el-container>
			</div>
		</el-main>
		<el-footer class="flex title" style="justify-content: center;height: 30px">
			<a href="http://www.hyycinfo.com" target="_blank">源辰信息科技</a>
		</el-footer>
	</el-container>
	<el-dialog title="添加网址" :visible.sync="showEdit">
		<div style="display: flex; gap: 10px; align-items: start">
			<el-form style="flex: auto">
				<el-form-item label="地址:" label-width="80px">
					<el-input v-model="fav.addr" autocomplete="off" placeholder="输入http开头的网页地址"
						@change="getInfo"></el-input>
				</el-form-item>
				<el-form-item label="名称:" label-width="80px">
					<el-input v-model="fav.name" autocomplete="off" placeholder="网站名称"></el-input>
				</el-form-item>
				<el-form-item label="分类:" label-width="80px">
					<el-input v-model="fav.tags" autocomplete="off" placeholder="每个分类用 ; 号隔开, 例如: 游戏;新闻"></el-input>
				</el-form-item>
				<el-form-item label="图片:" label-width="80px">
					<el-input v-model="fav.image" autocomplete="off" placeholder="输入http开头的网图片地址">
						<el-upload slot="append" action="/upload/upload"
								   :on-success="uploadSuccess"
								   :data="{type:'image'}"
								   :show-file-list="false">
							<el-button>上传图片</el-button>
						</el-upload>
					</el-input>
				</el-form-item>
				<el-form-item label="验证码:" label-width="80px">
					<div style="display: flex; gap: 5px">
						<el-input v-model="vcode" autocomplete="off" placeholder="验证码" style="flex: auto"></el-input>
						<img src="/vcode/image" onclick="src='/vcode/image?'+new Date()" style="width: 200px;cursor: pointer">
					</div>
				</el-form-item>
				<el-form-item label="描述:" label-width="80px">
					<el-input v-model="fav.intro" autocomplete="off" type="textarea" :rows="3" placeholder="输入网站说明, 不超出200个字"></el-input>
				</el-form-item>
			</el-form>
			<el-image :src="fav.image || 'https://img0.baidu.com/it/u=447433031,4160304780&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=300'"
					style="width: 200px">
			</el-image>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showEdit = false">取 消</el-button>
			<el-button type="primary" @click="add">确 定</el-button>
		</div>
	</el-dialog>
</div>
</body>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			showEdit: false,
			fav:{name:"",addr:"",tags:"",image:"",intro:""},
			vcode: "",
			tags:[],
			selectedTag : null,
			openTimes: {},
			mergeDialogVisible: false, // 控制对话框是否可见
			selectedTagToMerge: null, // 选择的目标标签 ID
			selectedTagId: null,
			name: "",
			activefindkey: false,
			scanLoginToken: "",
			scanLoginWs: null
		},
		computed:{
			allFavs(){
				if(this.tags){
					let all = 0;
					this.tags.forEach(t=>{
						t.favs.forEach(f=>all++);
					});
					return all;
				} else {
					return 0;
				}
			}
		},
		methods:{
			add(){
				axios.post("/fav/create?vcode="+this.vcode, this.fav).then(res=>{
					if(res.data.code == 1){
						this.$message(res.data.msg);
						this.showEdit = false;
					} else {
						this.$alert(res.data.msg);
					}
				})
			},
			uploadSuccess(res,file){
				// res => Result (code, msg, data(webPath))
				if(res.code == 1){
					this.fav.image = res.data;
				} else {
					this.$alert("图片上传失败!");
				}
			},
			queryTag(user){
				axios.get("/tag/queryByUid").then(res=>{
					this.tags = res.data;
					this.selectTag("b");
				})
			},
			selectTag(index,indexPath){
				this.activefindkey = false;
				if(index == 'a' || index=='c'){
					return;
				} else if(index == 'b'){
					let favs = [];
					this.tags.forEach(t=>{
						t.favs.forEach(f=>favs.push(f));
					})
					return this.selectedTag = {
						favs : favs
					};
				}else if(index == 'd'){
					this.activefindkey = true;
				} else {
					this.selectedTag = this.tags.find(t=>t.id==index);
					this.selectedTag.favs.sort((a,b)=>(a.sort||a.id)-(b.sort||b.id));
				}
			},
			toTop(fav){
				axios.post("/fav/toTop",fav).then(res=>{
					if(res.data.code == 1){
						fav.sort = res.data.data.sort;
						this.selectTag(this.selectedTag.id);
					}
				});
			},
			openLink(fav){
				let time = this.openTimes[fav.id];
				let now = new Date().getTime();
				if(time){
					let t = now - time;
					if(t < 10000){
						this.$alert("本次点击不计入浏览量!");
						return;
					}
				}
				fav.opens = (fav.opens||0) + 1;
				this.openTimes[fav.id] = now;
				// 请更新opens
				axios.get("/fav/openLink?fid=" + fav.id).then(res=>{
					if(res.data.code!=1){
						this.$alert(res.data.msg);
					}
				})
			},
			getInfo(){
				axios.get("/fav/getInfo",{
					params:{
						addr: this.fav.addr
					}
				}).then(res=>{
					if(res.data){
						this.fav = res.data;
					}
				})
			},
			del(fav){
				if(window.confirm("是否确定删除该网站")){
					axios.post("/fav/delete", fav).then(res=>{
						if(res.data.code == 1){
							this.$message("删除成功");
							this.selectTag(this.selectedTag.id); // 回到全部标签
						}else{
							this.$alert(res.data.msg);
						}
					})
				}
			},
			openMergeDialog(tagId) {
				this.selectedTagId = tagId;
				this.mergeDialogVisible = true;
			},
			mergeTags() {
				if (!this.selectedTagToMerge) {
					this.$message.error('请选择目标标签');
					return;
				}
				try {
					const response = axios.post(`/tag/merge?fromTagId=${this.selectedTagId}&toTagId=${this.selectedTagToMerge}`);
					if (response.data.code == 1) {
						this.$message.success('标签合并成功');
						this.mergeDialogVisible = false;

					} else {
						this.$message.error('标签合并失败: ' + response.data.msg);
					}
				} catch (error) {
					console.error('标签合并请求失败:', error); // DEBUG信息
					this.$message.error('标签合并请求失败: ' + error.message);
				}
			},
			toFind() {
				if(this.name==""){
					return;
				}
				axios.get("/fav/toFind?name=" + this.name).then(res => {
					if (res.data.code == 1) {
						this.selectedTag = {
							favs: res.data.data
						}
						//console.log(this.selectedTag);
					} else {
						this.$alert(res.data.msg);
					}
				})
				this.selectTag("d");
			},
			getToken(){
				axios.get("/getScanLoginToken").then(res=>{
					if(res.data.code != 1){
						console.info(res.data.msg);
					} else {
						this.scanLoginToken = res.data.data;
						this.scanLoginWs = new WebSocket("/scanLogin/" + this.scanLoginToken);
						this.scanLoginWs.onmessage = (data)=>{
							if(data.data == 'ok'){
								axios.get("/scanLogin?token="+this.scanLoginToken).then(res1=>{
									if(res1.data.code != 1){
										this.$alert(res1.data.msg);
									} else {
										this.$refs.lg.user = res1.data.data;
										this.$refs.lg.$emit("logined", null);
									}
								})
							}
						};
					}
				});
			}
		}
	})
</script>
<style>
	html,body{
		margin: 0px;
		padding: 0px;
	}
	#app>.el-container>.el-main{
		overflow-x: hidden;
		background-image: url("https://img2.baidu.com/it/u=2076726300,191426335&fm=253&fmt=auto?w=500&h=500");
		background-size: cover;
	}
	.el-main{
		padding: 0px 10px;
	}
	.el-card{
		margin-top: 10px;
	}
	html,body,#app,#app>.el-container{
		height: 100%;
	}
	*{
		transition: all .5s;
	}
	a{
		text-decoration: none;
	}
	.c900{
		width: 1000px;
		margin: auto;
	}
	.title{
		background-color: #0a699999;
		/*color: #fff;*/
	}
	.title *{
		/*color: #fff;*/
	}
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: 10px;
	}
	.flex>*{
		margin: 0px;
		padding: 0px;
	}
	.center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	nav{
		display: flex;
		height: 100%;
	}
	nav .el-link{
		padding-inline: 20px;
		font-size: 1em;
	}
	nav .el-link:hover{
		background-color: #99f7;
	}
	img{
		width: 40px;
		height: 40px;
		object-fit: cover;
	}
	.hsc:hover{
		transform: scale(1.1);
		box-shadow: 3px 3px 3px 3px #8888;
	}
	.grid2{
		display: grid;
		grid-template-columns: auto auto;
	}
	.grid3{
		display: grid;
		grid-template-columns: auto auto auto;
	}
	.grid4{
		display: grid;
		grid-template-columns: auto auto auto auto;
	}
	.h100{
		height: 100%;
	}
	small{
		font-size: .7em;
		color: #989
	}
</style>

</html>